<template>
	<view v-if="currentView === 'application'" class="container">
		<nav-header title="新成员申请" custom-nav></nav-header>
		<view class="application-list">
			<view v-for="(app, index) in applications" :key="index">
				<view class="application-item">
					<view class="fc">
						<image class="application-image" :src="app.image"></image>
						<view class="application-details">
							<view class="nickname">{{ app.nickname }}</view>
							<view class="source">来源: {{ app.source }}</view>
						</view>
					</view>
					<view class="application-buttons">
						<view>
							<button class="refuse" @click="handleReject(app)">拒绝</button>
						</view>
						<view>
							<button class="agree" @click="handleAgree(app)">同意申请</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 拒绝页面 -->
	<view v-else-if="currentView === 'reject'" class="container">
		<nav-header title="拒绝申请" custom-nav>
			<template v-slot:left>
				<view class="icon-text" @tap="backToApplication()">
					<svg-icon icon="arrowLeft" :width="40"></svg-icon>
				</view>
			</template>
		</nav-header>
		<view class="content">
			<text class="input-key">拒绝理由</text>
			<input class="input-value" placeholder="请输入理由" />
		</view>
		<!-- <view class="reject-reject-button">
			<button class="rejbtn" type="warn">确认拒绝</button>
		</view> -->
		<tabbar-button-group :refuse="true" text="确认拒绝"></tabbar-button-group>
	</view>

	<!-- 同意页面 -->
	<view v-else-if="currentView === 'agree'" class="container">
		<nav-header title="同意申请" custom-nav>
			<template v-slot:left>
				<view class="icon-text" @tap="backToApplication()">
					<svg-icon icon="arrowLeft" :width="40"></svg-icon>
				</view>
			</template>
		</nav-header>
		<view style="padding-bottom: 200rpx;">
			<uni-forms label-position="top" ref="form" :model="formData">
				<view class="agree-apply-head">
					<image class="avatar-css"
						src="https://img0.baidu.com/it/u=3582999362,3809132610&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800">
					</image>
					<text>王五</text>
				</view>
				<uni-forms-item label="姓名" name="name">
					<uni-easyinput type="text" v-model="formData.name" :inputBorder="false" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="部门" name="department">
					<uni-easyinput type="text" v-model="formData.department" :inputBorder="false" placeholder="请输入部门" />
				</uni-forms-item>
				<uni-forms-item label="直属主管" name="supervisor">
					<uni-easyinput type="text" v-model="formData.supervisor" :inputBorder="false"
						placeholder="请输入直属主管" />
				</uni-forms-item>
				<uni-forms-item label="职位" name="position">
					<uni-easyinput type="text" v-model="formData.position" :inputBorder="false" placeholder="请输入职位" />
				</uni-forms-item>
				<uni-forms-item label="入职时间" name="entryDate">
					<!-- <uni-datetime-picker type="datetime" v-model="formData.entryDate" /> -->
					<!-- 禁止使用uni默认组件 -->
					<up-datetime-picker hasInput placeholder="请选择日期" mode="date" v-model="formData.entryDate">
					</up-datetime-picker>
				</uni-forms-item>
				<up-line margin="20rpx"></up-line>
				<uni-forms-item label="身份证姓名" name="idName" label-width="180rpx">
					<uni-easyinput type="text" v-model="formData.idName" :inputBorder="false" placeholder="请输入身份证姓名" />
				</uni-forms-item>
				<uni-forms-item label="证件号码" name="idNumber">
					<uni-easyinput type="text" v-model="formData.idNumber" :inputBorder="false" placeholder="请输入证件号码" />
				</uni-forms-item>
				<uni-forms-item label="出生日期" name="birthDate">
					<!-- <uni-datetime-picker type="datetime" v-model="formData.birthDate" /> -->
					<up-datetime-picker hasInput placeholder="请选择日期" :minDate="27281000" :maxDate="1735371213377"
						mode="date" v-model="formData.birthDate">
					</up-datetime-picker>
				</uni-forms-item>
				<uni-forms-item label="性别" required>
					<radio-group class="uni-flex uni-row radio-group" @change="radioChange" style="flex-wrap: wrap">
						<radio id="trigger-change" value="1" :checked="formData.gender === '1'"
							style="margin-right: 15px" class="radio r">男</radio>
						<radio value="2" :checked="formData.gender === '2'" style="margin-right: 15px" class="radio r1">
							女</radio>
					</radio-group>
				</uni-forms-item>

			</uni-forms>
		</view>
		<!-- <button type="primary" @tap="submitForm">提交</button> -->
		<tabbar-button-group text="提交" @click="submitForm"></tabbar-button-group>
	</view>
</template>


<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	// 示例数据
	const applications = ref([{
			image: 'https://q1.itc.cn/q_70/images03/20240107/94ec1d6ce3b84a1faa95f52cd9aa998e.jpeg',
			nickname: '张三',
			source: '李四发起的链接邀请'
		},
		{
			image: 'https://q7.itc.cn/q_70/images03/20240813/ebaeacc12a2d40e99cd1f0cff7cf29cd.png',
			nickname: '王五',
			source: '赵六发起的链接邀请'
		},
		{
			image: 'https://q7.itc.cn/q_70/images03/20240813/ebaeacc12a2d40e99cd1f0cff7cf29cd.png',
			nickname: '王五',
			source: '赵六发起的链接邀请'
		},
		{
			image: 'https://q7.itc.cn/q_70/images03/20240813/ebaeacc12a2d40e99cd1f0cff7cf29cd.png',
			nickname: '王五',
			source: '赵六发起的链接邀请'
		},
		{
			image: 'https://q7.itc.cn/q_70/images03/20240813/ebaeacc12a2d40e99cd1f0cff7cf29cd.png',
			nickname: '王五',
			source: '赵六发起的链接邀请'
		},
		{
			image: 'https://q7.itc.cn/q_70/images03/20240813/ebaeacc12a2d40e99cd1f0cff7cf29cd.png',
			nickname: '王五',
			source: '赵六发起的链接邀请'
		},
		{
			image: 'https://q7.itc.cn/q_70/images03/20240813/ebaeacc12a2d40e99cd1f0cff7cf29cd.png',
			nickname: '王五',
			source: '赵六发起的链接邀请'
		}
	]);

	// 当前显示的视图
	const currentView = ref('application');

	// 处理同意按钮点击事件
	const handleAgree = (app) => {
		currentView.value = 'agree';
		console.log('Agreed application:', app);
	};

	// 处理拒绝按钮点击事件
	const handleReject = (app) => {
		currentView.value = 'reject';
		console.log('Rejected application:', app);
	};

	// 返回到申请列表
	const backToApplication = () => {
		currentView.value = 'application';
	};


	const currentYear = new Date().getFullYear();
	const today = new Date();

	// 创建一个新的 Date 对象，年份为当前年份，月份和日期为今天的月份和日期
	const entryDate = new Date(currentYear, today.getMonth(), today.getDate());

	// 将日期转换为时间戳
	const timestamp = entryDate.getTime();



	// 假数据
	const formData = ref({
		id: '',
		name: '',
		department: '',
		supervisor: '',
		position: '',
		entryDate: timestamp,
		idName: '',
		idNumber: '',
		birthDate: '',
		gender: '1'
	});
	// 处理 radio 组变化的事件
	const radioChange = (event) => {
		formData.value.gender = event.detail.value;
	};
	const submitForm = () => {

		console.log(formData.value)
	};
	// 组件挂载后执行的操作
	onMounted(() => {
		console.log('formData:', formData.value);
	});
</script>
<style lang="scss" scoped>
	.container {
		padding: 20rpx;

	}

	.application-item {
		display: flex;
		flex-direction: column;
	}

	.fc {
		display: flex;
		align-items: center;
		gap: 16rpx;
		padding: 24rpx 0;
		border-bottom: 1rpx solid $gray-200;
	}

	.application-image {
		height: 100rpx;
		width: 100rpx;
		border-radius: 16rpx;
	}

	.application-details {
		display: flex;
		flex-direction: column;
		/* 文字部分垂直排列 */
		gap: 5px;
		/* 文字之间的间距 */
		font-size: 30rpx;
		.nickname{
			font-weight: bold;
			font-size: 16px;
		}
	}

	.application-buttons {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 24rpx 0;

		.refuse {
			width: 100rpx;
			font-size: 24rpx;
			border: 1rpx solid $gray-400;
			color: $gray-400;
			border-radius: 34rpx;
			padding: 8rpx 24rpx;
			height: 56rpx;
			line-height: 36rpx;
			margin-right: 24rpx;
		}

		.agree {
			width: 150rpx;
			font-size: 24rpx;
			background-color: $brand-500;
			color: $white;
			border-radius: 34rpx;
			padding: 8rpx 24rpx;
			height: 56rpx;
			line-height: 36rpx;
		}
	}

	.agree-button,
	.reject-button {
		padding: 5px 10px;
		/* 按钮内边距 */
		font-size: 14px;
		/* 按钮字体大小 */
	}

	.icon-text {
		display: flex;
		/* gap: 3px; */
		align-items: center;
		justify-items: center;
	}

	:deep(.uni-easyinput__content-input) {
		background-color: $gray-100;
	}

	:deep(.uni-forms-item.is-direction-top) {
		margin-bottom: 10rpx;
	}

	.content {
		margin-top: 20rpx;
		display: flex;
		gap: 24rpx;
		flex-direction: column;
		justify-content: center;
	}

	.input-key {
		margin-right: 10px;
		/* 可以根据需要调整间距 */
		font-size: 16px;
		/* 字体大小 */
	}

	.input-value {
		flex: 1;
		/* 让输入框占据剩余的空间 */
		font-size: 14px;
		/* 字体大小 */
		padding: 24rpx 32rpx;
		/* 内边距 */
		border-radius: 4px;
		/* 圆角 */
		background-color: $gray-100;
		/* 背景色 */
		outline: none;
		/* 移除焦点时的默认轮廓线 */
		transition: border-color 0.3s ease;
		/* 平滑过渡效果 */
	}


	.input-value:focus {
		border-color: #007bff;
		/* 聚焦时的边框颜色 */
	}


	.reject-reject-button {
		position: absolute;
		width: 95%;
		bottom: 0;
		padding-bottom: 42rpx;

		.rejbtn {
			border-radius: 50rpx;
		}
	}

	.agree-apply-head {
		height: 140rpx;
		width: 100%;
		display: flex;
		align-items: center;
		gap: 30rpx;
	}

	.avatar-css {
		height: 100rpx;
		width: 100rpx;
		border-radius: 10px;

	}

	.info {
		font-size: 22rpx;
	}
</style>